<template>
  <div style=" flex-direction: column;">
    {{mapaddr}}{{addr.locatin}}
<!--    <div class="form">-->
<!--      &lt;!&ndash;搜索框&ndash;&gt;-->
<!--      <input type="text" class="input" v-model="address" id="tipinput"     @keyup.enter="select">-->
<!--    </div>-->
    <div id="myPageTop">
      <!--      <input type="text" class="input" v-model="address" id="tipinput"     @keyup.enter="select">-->
      <el-input v-model="addr.add" style="width: 140px" @keyup.enter="findAddrs" />
      <el-button @click="findAddrs">搜索</el-button>
    </div>
    <div class="list" id="list"></div>
    <div id="bigdd">
      <div id="container"></div>

    <div id="bigbox">
      <div id="addorder">
        <el-button type="success" @click="real=true">实时</el-button>
        <el-button type="warning" @click="pick=true">接机</el-button>
        <el-button type="danger">送机</el-button>
        <el-button type="primary">预约</el-button>
        <el-button type="info">包车</el-button>
      </div>

        <div v-show="pick === true" id="order">
          <el-form :model="form" label-width="100px">
            <el-form-item label="航班号" prop="flightNumber">
              <el-input v-model="form.flightNumber" placeholder="请输入航班号" />
            </el-form-item>
            <el-form-item label="航站楼信息" prop="terminalInformation">
              <el-input v-model="form.terminalInformation" placeholder="请输入航站楼信息" />
            </el-form-item>
            <el-form-item label="机场名称" prop="startPoint">
              <el-input v-model="form.startPoint" placeholder="请输入机场名称" @blur="findStartAddrs(form.startPoint)" />
            </el-form-item>
            <el-form-item label="目的地" prop="destination">
              <el-input v-model="form.destination" placeholder="请输入目的地" @blur="findEndAddrs(form.destination)" />
            </el-form-item>
            <el-form-item label="上车时间" prop="gocarTime">
              <el-date-picker clearable
                              v-model="form.gocarTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择上车时间">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="pick=false">取 消</el-button>
          </div>
        </div>
      </div>



      <div v-show="real === true" id="order">
        <el-form :model="form" label-width="100px">
          <el-form-item label="用户手机号" prop="flightNumber">
            <el-input v-model="form.userTel" placeholder="请输入航班号" />
          </el-form-item>
          <el-form-item label="目的地" prop="destination">
            <el-input v-model="form.destination" placeholder="请输入目的地" @blur="findEndAddrs(form.destination)" />
          </el-form-item>
          <el-form-item label="距离" prop="distance">
            <el-input v-model="form.distance" placeholder="请输入距离" />
          </el-form-item>
          <el-form-item label="上车时间" prop="gocarTime">
            <el-date-picker clearable
                            v-model="form.gocarTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                            placeholder="请选择上车时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="预估价格" prop="predictPrice">
            <el-input v-model="form.predictPrice" placeholder="请输入预估价格" />
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="real=false">取 消</el-button>
        </div>
      </div>



    </div>


  </div>
</template>
<script setup>
import { onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {findAddr} from "@/api/passenger/ChatMsg.js";
import {addPickAirport} from "@/api/pickAirport/pickAirport.js";
const mapaddr=ref({})

const { proxy } = getCurrentInstance();

const address = ref("");
const title = ref("");
const pick = ref(false);
const real = ref(false);

const data = reactive({
  form: {}
})


const { form } = toRefs(data);


let map = null;
let marker = null;
const addr=ref({
  add: "",
  locatin:''
});

const clickHandler = function (e){
  console.log(e)
  addr.value.locatin = e.lnglat.getLng() + ',' + e.lnglat.getLat()
}

function reset() {
  form.value = {
    flightNumber: null,
    terminalInformation: null,
    startPoint: null,
    startPointLongitude: null,
    startPointLatitude: null,
    destination: null,
    destinationLongitude: null,
    destinationLatitude: null,
    distance: null,
    createTime: null,
    gocarTime: null,
    driverId: null,
    startTime: null,
    endTime: null,
    predictPrice: null,
    realPrice: null,
    orderStatus: null,
    userTel: null
  };
}

function findStartAddrs(addr){
  findAddr(addr).then(obj=>{
    if (obj.code===200){
      var split = obj.data.geocodes[0].location.split(',');
      form.value.startPointLongitude = split[0]
      form.value.startPointLatitude = split[1]
    }
  })
}

function findEndAddrs(addr){
  findAddr(addr).then(obj=>{
    if (obj.code===200){
      var split = obj.data.geocodes[0].location.split(',');
      form.value.destinationLongitude = split[0]
      form.value.destinationLatitude = split[1]
    }
  })
}

function submitForm(){
  addPickAirport(form.value).then(response => {
    proxy.$modal.msgSuccess("下单成功,待司机接单,请稍后");
    pick.value = false;
  });
}


function topick(){
  open.value = true;
  title.value = "添加接机订单";
}





function findAddrs(){
  findAddr(addr.value.add).then(obj=>{
    if (obj.code===200){
      console.log(obj)
      mapaddr.value = obj.data.geocodes[0]
      console.log(mapaddr.value)
      var location = mapaddr.value.location.split(',');
      map.setCenter(location)
      map.setZoom(17)
      marker.setPosition(location)
    }
  })
}

function lodMap(){
    window._AMapSecurityConfig = {
      securityJsCode: "2be9a9b9a5ec953934d61b776a4fd2d5",
    };
    AMapLoader.load({
      key: "026ef6cc4bb68e803eb48d86fa63d92d", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // center: [split[0],split[1]],
      // plugins: ['AMap.Scale','AMap.ToolBar','AMap.PlaceSearch','AMap.CitySearch','AMap.MapType'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    }).then((AMap) => {
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [121.696492,30.870378], // 初始化地图中心点位置
      });
      AMap.plugin(['AMap.Scale','AMap.ToolBar','AMap.Marker','AMap.MapType','AMap.ControlBar','AMap.HawkEye','AMap.Geolocation','AMap.PlaceSearch'], function () {
        //在回调函数中实例化插件，并使用插件功能
        map.addControl(new AMap.Scale())
        map.addControl(new AMap.ToolBar())//缩放
        map.addControl(new AMap.ControlBar())//控制罗盘
        map.addControl(new AMap.MapType())//图层切换
        map.addControl(new AMap.Geolocation())

        marker =  new AMap.Marker({
          position: [121.696492,30.870378],
        })
        map.addControl(marker)

        map.addControl(
            new AMap.HawkEye({
              position: 'RB', //控件停靠位置（LT/RT/LB/RB）
            }),
        );
        map.on("click",clickHandler);
      });

      onUnmounted(() => {
        map?.destroy();
      });
    }).catch((e) => {
      console.log(e);
    });
}

lodMap();
</script>

<style scoped>
#container {
  //position: relative;
  width: 70%;
  height: 800px;
  float: left;
}
#myPageTop {
  //position: absolute;
  width: 300px;
  height: 50px;
  top: 5px;
  right: 10px;
  background: #FFFFFF none repeat scroll 0 0;
  border: 1px solid #ccc;
  margin: 10px auto;
  padding: 6px;
  font-size: 14px;
}

.list {
  position: absolute;
  top: 350px;
  right: 200px;
  height: 300px;
  width: 240px;
  z-index: 999;
}
#addorder {
  top: 350px;
  right: 200px;
  height: 200px;
  width: 400px;
  float: left;
}
#order {
  width: 400px;
  float: left;
  height: 600px;
}
#bigbox {
  width: 30%;
  height: 800px;
  float: left;
}
#bigdd {
  display: flex;
  flex-direction: column; /* 垂直排列 */
}
</style>
